<template>
  <div>
    <div class="download-tip" id="target">
      <span>{{tips}}</span>
    </div>
    <el-table
      v-if="noResponse"
      v-loading="loading"
      style="width: 100%;height: 250px;margin: 10px auto;z-index: 1">
    </el-table>
    <el-empty v-if="isEmpty" :image-size="150"></el-empty>
    <div class="download-lists" v-if="!noResponse">
      <a v-for="(item,index) in contentData" :key="index" :href=item.entryDownloadUrl title="点击下载">
        <div class="download-list">
          <div class="fileIcon"><i class="iconfont icon-excel1"></i></div>
          <div class="fileTitle">{{item.entryValue}}</div>
          <div class="fileSize"><span>大小：</span><span>{{item.entrySize}}</span></div>
          <div class="fileDownload"><i class="iconfont icon-xiazai1"></i></div>
        </div>
      </a>
      <el-pagination
        v-if="!isEmpty && !noResponse"
        background
        layout="prev, pager, next"
        :total=pageTotal
        @current-change="handleCurrentChange(currentPage)"
        :current-page.sync = currentPage
        class="page">
      </el-pagination>
    </div>
  </div>
</template>

<script>
    export default {
        name: "AdminDownload-baike",
        data(){
            return{
                tips:'',

                loading:"true",
                // noResponse: false,
                noResponse: true,
                isEmpty:false,
                baseURL:'',
                pageTotal:0,
                currentPage:1,  // 当前页

                baseURL:'http://localhost:8081/adminPage/getEntry/baike/',
                baseURL2:'http://localhost:8081/adminPage/getPages/baike',
                contentData:''
            }
        },
        mounted(){
            this.$emit("component","baike")
            this.getRandTip()
            this.getDownload()
            this.getPages()
        },
        methods:{
            getRandTip(){
                this.axios.post("http://localhost:8081/cache/getRandTip").then(res=>{
                    this.tips = res.data
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            getDownload(){
                this.axios.post(this.baseURL+"1").then(res=>{
                    console.log(res.data+"00000")
                    this.noResponse=false
                    if (res.data == false){
                        this.$message.error("服务器异常")
                    } else if (res.data == "empty") {
                        this.isEmpty = true
                    } else {
                        this.contentData = res.data
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            getPages(){
                this.axios.post(this.baseURL2).then(res=>{
                    this.pageTotal = res.data * 10
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            handleCurrentChange(currentPage){
                this.axios.post(this.baseURL+currentPage).then(res=>{
                    this.noResponse=false
                    if (res.data != "empty"){
                        this.contentData = res.data
                        let target = document.getElementById("target").offsetTop
                        window.scrollTo({
                            top:target,
                            behavior: "smooth"
                        });
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
        }
    }
</script>

<style scoped>
  .download-tip{
    width: 98%;
    height: 30px;
    line-height: 32px;
    margin: 0px auto;
    margin-bottom: 5px;
    margin-top: 5px;
    border-radius: 2px;
    background-color: rgb(247, 237, 199);

    display: -webkit-box;
    overflow:hidden;
    text-overflow: ellipsis;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
  }
  .download-tip span{
    padding-left: 1%;
    font-size: 12px;
    color: rgb(161, 129, 0);
  }
  .download-lists{
    width: 98%;
    margin: 0px auto;
  }
  .download-list{
    width: 100%;
    height: 50px;
    margin-bottom: 3px;
    border-radius: 2px;
    background-color: #ebeff1;
    transition: 0.2s;
  }
  .download-list div{
    min-width: 0px;
    height: 50px;
    line-height: 50px;
  }
  .download-list:hover{
    background-color: rgb(228, 228, 228);
  }
  .download-list:hover .fileDownload i{
    color: rgb(131, 131, 131);
  }
  .fileIcon{
    float: left;
    margin-left: 1%;
  }
  .fileIcon i{
    color: rgba(83, 185, 114, 0.9);
    font-size: 25px;
  }
  .fileTitle{
    max-width: 70%;
    float: left;
    font-size: 13px;
    font-weight: bolder;
    color: rgb(124, 124, 124);
    margin-left: 1%;

    display: -webkit-box;
    overflow:hidden;
    text-overflow: ellipsis;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
    /*background-color: tomato;*/
  }
  .fileSize{
    float: left;
    margin-left: 8%;
    font-size: 13px;
    color: rgb(124, 124, 124);
  }
  .fileDownload{
    float: right;
    margin-right: 1%;
    color: rgb(214, 214, 214);
    font-size: 20px;
  }
  .page{
    margin: 10px auto;
    margin-left: -10px;
  }

</style>
